<template>
	<div class="index">
    <p class="p-head">搜索结果：</p>
    <div class="limitbox freshbox">
      <div class="list item" v-for="item in xghlist" @click="godetail(item.category,item.id)">
        <img alt="" :src="comimgsrc+item.preview">
        <div class="down">
          <p class="name">{{item.name}}</p>
          <p class="price">{{item.price}}<span>/{{item.unit}}</span></p>
        </div>
      </div>
    </div>
	</div>
</template>
<script>
import qs from 'qs';

export default {
	name: 'index',
  	data () {
  		return{
        xghlist:[],
        comimgsrc:'http://api.mountainfreshes.com',
  		}
  	},
  	methods:{
      getsearch:function(){
      this.$http.post("/index.php/index/search/search",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  search_name: this.$route.query.cpid

              }))
              .then(res => {
                this.xghlist = res.data.row
                console.log(this.xghlist)
              })
              .catch(error => {
                alert("网络错误")
              });
    },
    godetail:function(fl,id){
        if(fl == 1){
          this.$router.push({ name: 'freshDetail', query:{cpid: id} })
        }else{
          this.$router.push({ name: 'specialtyDetail', query:{cpid: id} })
        }
    }
  	},
  	components:{
  	},
  	mounted(){
    },
    created(){
      this.getsearch();
    },
    watch:{
          '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                if(to.name == 'searchpage'){
                  this.getsearch();
                }
              }
        }
}
</script>
<style scoped lang="less">
.p-head{
  text-align: left;
  font-size: .24rem;
  color: #333;
  padding: .2rem;
}
.limitbox{
  width: 6rem;
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin: auto;
  margin-top: .14rem;
  .list{
    width: 2.9rem;
    height: 3.6rem;
    float: left;
    margin-top: .2rem;
    position: relative;
    .djs{
      width: 100%;
      height: .7rem;
      background: rgba(0,0,0,.6);
      position: absolute;
      left: 0;
      top: 0;
      z-index: 11;
    }
    &:nth-child(2n){
      margin-left: .2rem;
    }
    img{
      display: block;
      width: 2.9rem;
      height: 2.36rem;
    }
    .down{
      padding: 0 .1rem;
      height: 1.24rem;
      background: #eeeeee;
      .name{
        font-size: .24rem;
        color: #2a2a2a;
        text-align: center;
        padding-top: .12rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .price{
        font-size: .36rem;
        color: #cf4040;
        text-align: center;
        span{
          font-size: .2rem;
          color: #383838;
        }
      }
      .m_price{
        color: #242424;
        font-size: .2rem;
      }
    }
  }
  .item{
    height: 3.32rem;
    box-sizing: border-box;
    border: .01rem solid #d0d0d0;
    padding: .01rem;
    img{
      display: block;
      width: 100%;
      height: 2.38rem;
    }
    .down{
      background: #fff;
      height: .82rem;
      padding: 0 .1rem;
      border-top: 1px solid #d0d0d0;

      .name{
        font-size: .24rem;
        text-align: left;
      }
      .price{
        font-size: .22rem;
        color: #434343;
        text-align: left;
        padding-top: .08rem;
      }
    }
  }
}
.freshbox{
  height: 7.06rem;
  overflow: hidden;
}
</style>